菜单切换
FACESOHO知行者
心灵
记录
远方
赞赏工具
源代码:
点击运行
保存
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue 测试实例 - 小鸟启蒙(facesoho.com)</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <div id="app"> <table> <tr><th>序号</th><th>商品名称</th><th>商品价格</th><th>购买数量</th><th>操作</th></tr> <tr v-for="iphone in Ip_Json"> <td>{{ iphone.id }}</td> <td>{{ iphone.name }}</td> <td>{{ iphone.price }}</td> <td> <button v-bind:disabled="iphone.count === 0" v-on:click="iphone.count-=1">-</button>{{ iphone.count }} <button v-on:click="iphone.count+=1">+</button> </td> <td> <button v-on:click="iphone.count=0">移除</button> </td> </tr> </table> 总价:${{totalPrice()}} </div><script> var app = new Vue({ el:'#app', data:{ Ip_Json:[ {id:1, name:'iphone 8', price:5099, count:1}, {id:2,name:'iphone xs',price:8699,count:1}, {id:3,name:'iphone xr',price:6499,count:1 }] }, methods:{ totalPrice :function(){ var totalP = 0; for (var i = 0,len = this.Ip_Json.length;i<len;i++) { totalP+=this.Ip_Json[i].price*this.Ip_Json[i].count; } return totalP; } } })</script> </body> </html>
运行结果